<template>
 <div class="container">
   <div class="card-search">
    <el-form size="small" :inline="true" label-width="80px" :model="form" class="demo-form-inline">
      <el-form-item label="规格型号">
        <el-select filterable clearable v-model="form.specification" placeholder="请选择">
            <el-option v-for="(item, index) in specifications" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="直径规格">
        <el-select filterable clearable v-model="form.diameter" placeholder="请选择">
            <el-option v-for="(item, index) in diameters" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="float:right;" label=" ">
        <el-button  icon="el-icon-search" type="primary" @click="getAllData()">查询</el-button>
        <el-button  icon="el-icon-refresh" type="primary" plain @click="refresh()">重置</el-button>
        <el-button  icon="el-icon-plus" type="primary" @click="title='新增坩埚成型工单';dialogFormVisible = true">增加</el-button>
      </el-form-item>
    </el-form>
    <el-dialog @close="close('crucibleForm')" width="60%" :modal-append-to-body="false" :title="title" :visible.sync="dialogFormVisible">
      <el-form :label-position="'right'" label-width="120px" ref="crucibleForm" :rules="crucibleRules" :model="crucibleForm">
        <el-form-item label="规格型号" prop="specification">
          <el-select style="width:300px;" v-model="crucibleForm.specification" placeholder="请选择规格型号">
            <el-option label="HP" value="HP"></el-option>
            <el-option label="RP" value="RP"></el-option>
            <el-option label="IP" value="IP"></el-option>
            <el-option label="UHP" value="UHP"></el-option>
            <el-option label="SHP" value="SHP"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="crucibleForm.specification === '其他'" label="其他规格型号" prop="specificationOther">
          <el-input style="width:300px;" v-model="crucibleForm.specificationOther" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="直径规格"  prop="diameter">
          <el-select style="width:300px;" v-model="crucibleForm.diameter" placeholder="请选择直径规格">
            <el-option label="φ500" value="φ500"></el-option>
            <el-option label="φ400" value="φ400"></el-option>
            <el-option label="φ300" value="φ300"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  v-if="crucibleForm.diameter === '其他'" label="其他直径规格" prop="diameterOther">
          <el-input style="width:300px;" v-model="crucibleForm.diameterOther" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成型结束时间" prop="crucibleTime" required>
            <el-date-picker
              style="width:300px;"
              v-model="crucibleForm.crucibleTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="数量" prop="crucibleNumber">
          <el-input type="number" v-model.number="crucibleForm.crucibleNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="焦配比说明" prop="crucibleDesc">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" v-model="crucibleForm.crucibleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('crucibleForm');dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('crucibleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog width="60%" :modal-append-to-body="false" title="工单详情" :visible.sync="dialogDetail">
      <el-descriptions :column="2">
          <el-descriptions-item label="规格型号">{{crucibleForm.specification}}</el-descriptions-item>
          <el-descriptions-item label="直径规格">{{crucibleForm.diameter}}</el-descriptions-item>
          <el-descriptions-item label="成型结束时间">{{crucibleForm.crucibleTime}}</el-descriptions-item>
          <el-descriptions-item label="数量">{{crucibleForm.crucibleNumber}}</el-descriptions-item>
          <el-descriptions-item label="焦配比说明" :span="2">{{crucibleForm.crucibleDesc}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
   </div>
   <div class="card-table">
        <el-table :header-cell-style="getRowClass" :data="tableData" style="width: 100%">
          <el-table-column label="工单编号" align="center" width="105">
            <template slot-scope="{row}">
              <span>{{row.code}}</span>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" align="center">
            <template slot-scope="{row}">
              <span>{{row.specification}}</span>
            </template>
          </el-table-column>
          <el-table-column label="直径规格" align="center">
            <template slot-scope="{row}">
              <span>{{row.diameter}}</span>
            </template>
          </el-table-column>
          <el-table-column label="坩埚数量" align="center">
            <template slot-scope="{row}">
              <span>{{row.crucibleNumber}}</span>
            </template>
          </el-table-column>
          <el-table-column label="填表人" align="center">
            <template slot-scope="{row}">
              <span>{{row.inputPeople}}</span>
            </template>
          </el-table-column>
          <el-table-column label="成型结束时间" align="center">
            <template slot-scope="{row}">
              <span>{{row.crucibleTime}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="焦配比说明" prop="crucibleDesc" align="center">
            <template slot-scope="{row}">
              <span>{{row.crucibleDesc}}</span>
              <!-- <el-tooltip v-else :content="row.crucibleDesc" placement="bottom" effect="light">
                <span>{{row.crucibleDesc.slice(0,15)}}</span>
              </el-tooltip> -->
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{row}">
              <el-button v-if="!row.isQualityTesting&&row.editable" icon="el-icon-edit-outline" type="text" style="color:#4D70FF;" @click="title='修改成型工单';editData(row),dialogFormVisible=true">编 辑</el-button>
              <el-button class="detailBtn" v-else icon="el-icon-tickets" type="text" @click="dialogDetail=true,editData(row)">详情</el-button>
              <el-button v-if="!row.isQualityTesting&&row.editable" :disabled="row.isQualityTesting&&!row.editable" icon="el-icon-delete" type="text" style="color:#4D70FF;margin:0;" @click="deleteOne(row)" >删 除</el-button>
            </template>
          </el-table-column>
        </el-table>
      <div class="pagin" v-if="total>0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
   </div>
 </div>
</template>

<script>
import { crucibleFormingGet, crucibleFormingDelete, crucibleFormingCreate, crucibleFormingUpdate, getCrucibleFormConditions } from '@/api/crucible.js'
import { nomalPages } from '@/mixin'
export default {
  name: 'test',
  mixins: [nomalPages],
  components: {},
  data () {
    return {
      form: { // 搜索表单
        specification: '',
        diameter: ''
      },
      title: '',
      dialogFormVisible: false,
      dialogDetail: false,
      crucibleForm: {
        diameterOther: '',
        specificationOther: '',
        specification: '',
        crucibleTime: '',
        diameter: '',
        crucibleNumber: '',
        crucibleDesc: ''
      },
      specifications: '',
      diameters: '',
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 1,
      crucibleRules: {
        specification: [
          { required: true, message: '请选择规格型号', trigger: 'change' }
        ],
        diameter: [
          { required: true, message: '请选择直径规格', trigger: 'change' }
        ],
        crucibleNumber: [
          { required: true, message: '请输入成型数量', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    // 'crucibleForm.crucibleTime' (news) {
    //   this.crucibleForm.crucibleTime = news.toString()
    // }
  },
  created () {},
  mounted () {
    getCrucibleFormConditions().then(res => {
      this.diameters = res.data.data.diameter
      this.specifications = res.data.data.specification
    })
  },
  methods: {
    getAllData () {
      const params = {
        ...this.form,
        pageSize: this.pageSize,
        currPage: this.currentPage
      }
      crucibleFormingGet(params).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.tableData = res.data.data.pageData
          this.total = res.data.data.total
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      })
    },
    onSubmit (formName) {
      if (this.title === '新增坩埚成型工单') {
        this.onSubmitCrucible(formName)
      } else {
        this.updateOne()
      }
    },
    onSubmitCrucible (formName) {
      var that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const payload = {
            specification: that.crucibleForm.specification === '其他' ? that.crucibleForm.specificationOther : that.crucibleForm.specification,
            diameter: that.crucibleForm.diameter === '其他' ? that.crucibleForm.diameterOther : that.crucibleForm.diameter,
            crucibleNumber: that.crucibleForm.crucibleNumber,
            crucibleTime: that.crucibleForm.crucibleTime,
            crucibleDesc: that.crucibleForm.crucibleDesc,
            inputPeople: that.$store.getters.getUserName
          }
          crucibleFormingCreate(payload).then(res => {
            if (res.data.code === 200) {
              that.$message({
                message: '新增成功',
                type: 'success'
              })
              this.dialogFormVisible = false
              this.getAllData()
            } else {
              that.$message({
                message: res.data.message,
                type: 'warning'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    editData (row) {
      this.crucibleForm = JSON.parse(JSON.stringify(row))
    },
    updateOne () {
      var that = this
      const payload = {
        ...this.crucibleForm,
        specification: that.crucibleForm.specification === '其他' ? that.crucibleForm.specificationOther : that.crucibleForm.specification,
        diameter: that.crucibleForm.diameter === '其他' ? that.crucibleForm.diameterOther : that.crucibleForm.diameter
      }
      crucibleFormingUpdate(payload).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '更新成功',
            type: 'success'
          })
          this.dialogFormVisible = false
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
        this.getAllData()
      })
    },
    deleteOne (row) {
      this.$confirm('此操作将永久删除该工单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crucibleFormingDelete(row._id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getAllData()
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style  scoped>
.detailBtn {
  color: $warning;
  padding: 8px;
  font-size: 12px !important;
  margin: 0 !important;
  &:hover{
    color:rgb(223, 197, 112) ;
  }
}
.pagin{
  display: flex;
  justify-content: right;
  padding: 12px 12px 0 0;
}
.pagin  .el-pager .active{
  background-color: $primary !important;
}
</style>
